<template>
    <div>
        <div class="box1">
            <h2>当前求和为：{{$store.state.sum}}</h2>
            <h4>组件简介：{{$store.state.description}}</h4>
        </div>
        <div class="box2">
            <h4>当前求和放大10倍后：{{$store.getters.bigSum}}</h4>
            <h4>简短的简介：{{$store.getters.smallDescription}}</h4>
        </div>
        <br>    
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">当前求和为奇数再+</button>
        <button @click="incrementWait">等一等再+</button>
        <button @click="incrementServer">按接口字数加</button>
    </div>
</template>

<script>
    export default {
        name: 'Count',
        data() {
            return {
                n: 1
            }
        },
        methods: {
            //加
            increment() {
                this.$store.commit('INCREMENT', this.n)
            },
            //减
            decrement() {
                this.$store.commit('DECREMENT', this.n)
            },
            //奇数加
            incrementIfOdd() {
                this.$store.dispatch('incrementIfOdd', this.n)
            },
            //等等再加
            incrementWait() {
                this.$store.dispatch('incrementWait', this.n)
            },
            incrementServer() {
                this.$store.dispatch('incrementServer');
            }
        }
    }
</script>

<style>
    * {
        margin-left: 10px;
    }

    .box {
        background-color: pink;
        padding: 20px;
    }

    .box1 {
        background-color: skyblue;
        padding: 20px;
        margin-bottom: 10px;
    }

    .box2 {
        background-color: orange;
        padding: 20px;
    }
</style>